<script>
import replyItem from './replyItem.vue'
export default {
	props: {
		replyChildOpenIndexes: {
			type: Array,
			default: []
		},
		item: {
			type: Object,
			default: {}
		},
		orderDetail: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {
			lang: uni.getStorageSync('lang'),
			replyShow: false,
			user_idOwn: uni.getStorageSync("user_id")
		}
	},
	components: {
		replyItem
	},
	methods: {
		replyOpen(id) {
			if (this.replyChildOpenIndexes.includes(id)) {
				this.$emit('update:replyChildOpenIndexes', this.replyChildOpenIndexes.filter(item => item !== id))
			} else {
				this.$emit('update:replyChildOpenIndexes', [...this.replyChildOpenIndexes, id])
			}
		},
		previewVideo(url) {
			this.$emit('previewVideo', url)
		},
		openModal() {
			this.$emit('openModal', this.item)
		},
		previewImage(url, arr) {
			console.log(url);
			console.log(arr);

			uni.previewImage({
				urls: arr.map(item => item.path),
				current: url
			})
		},
		// 下载文{{$t('件')}}
		downloadFile(url) {
			this.isMessageGo({
				action: 'downloadFile',
				data: {
					url: url
				}
			})
		}
	}
}
</script>
<template>

	<div class="flex items-start w-full">
		<div class="state flex-shrink-0">
			<div class="font-bold">
				<span v-if="item.status == 1">{{$t('正常')}}</span>
				<span v-if="item.status == 2">{{$t('异常')}}</span>
			</div>
			<div class="fz22 mt-20 text-gray-555">
				<div>{{ item.create_at.split(' ')[0] }}</div>
				<div>{{ item.create_at.split(' ')[1] }}</div>
			</div>
		</div>
		<div class="line pr-25 ml-25 mt-10 flex-shrink-0">
			<div class="state-arc w-20 h-20 rounded-full"
				:class="{ 'bg-red': item.status == 2, 'bg-green': item.status == 1 }" style="margin-left: -13rpx;">
			</div>
		</div>
		<div class="flex-col flex-1">
			<div class="fz26" style="word-break: break-word;">{{ lang == 'zh' ? get(item, "remark.remark") : get(item,
				"remark.remark_ru") }}</div>
			<!-- {{ item.video }} -->
			<!-- {{orderDetail.user_id}} -->
			<p class="fz24 text-010"> {{ item.user_id == orderDetail.user_id ? $t('(货主评论)') : '' }}</p>
			<div class="media-list flex flex-wrap flex-shrink-0">
				<div @click="previewVideo(item.path)" style="width:30%" class="h-140 relative flex-shrink-0 bg-gray-400"
					v-for="item in item.video">
					<image src="/static/icon/play.png" class="w-40 h-40 absolute"
						style="left: 50%;top: 50%;transform: translate(-50%,-50%);" mode="aspectFill">
					</image>
				</div>
				<image :src="image.path" @click="previewImage(image.path, item.image)" style="width:30%"
					v-for="image in item.image" class=" h-140 flex" mode="aspectFill">
				</image>
			</div>
			<div class="files w-full" style="width: 480rpx;">
				<div class="item py-16 px-24 between rounded-18 mb-16" v-for="item in item.attachment">
					<div class="flex text-1d1d1d fz24" style="width: 90%;">
						<u-icon name="file-text" size="40rpx" class="mr-8" color="#278AFF"></u-icon>
						<div class="pb-3" style="word-break: break-all;">{{ item.path.split('/').pop() }}</div>
					</div>
					<div @click="downloadFile(item.path)">
						<image src="/static/icon/download.png" mode="widthFix" class="w-30"></image>
					</div>
				</div>
			</div>
			<div class="flex mt-20">
				<div class="bg-primary px-50 py-20 rounded-50 fz28 text-white mb-10 mb-30" @click="openModal">
					{{$t('回复')}}</div>
			</div>

			<div class=" mt-20" v-if="replyChildOpenIndexes.includes(item.id) && item.child.length > 0">
				<replyItem @openModal="openModal" :userId="orderDetail.user_id" @previewVideo="previewVideo" :childData="item.child" />
			</div>
			<div v-if="item.child.length > 0" class="fz28 text-blue-2 mb-50 mt-20" @click="replyOpen(item.id)">
				{{ replyChildOpenIndexes.includes(item.id) ? $t('收起回复') : '展开回复(' + item.child.length + '条)' }}
			</div>

		</div>
	</div>

</template>

<style scoped lang="less">
.files {
	.item {
		background-color: #F7F7F7;
	}
}

.line {
	border-left: 1px dashed #D8D8D8;
}


.media-list {
	margin-top: 24rpx;
	margin-bottom: 24rpx;
	gap: 20rpx;
}

.reply {
	background-color: #fff;
	padding: 20rpx;
	border-radius: 20rpx;
	border: 1px solid #D8D8D8;
}

.absolute {
	position: absolute;
}

.del {
	right: 0rpx;
	top: 0rpx;
	transform: translate(30%, -30%);
}

.relative {
	position: relative;
}

.z-10 {
	z-index: 10;
}

.left-0 {
	left: 0;
}

.top-0 {
	top: 0;
}

.right-0 {
	right: 0;
}

.items-start {
	align-items: stretch;
}

.flex-wrap {
	flex-wrap: wrap;
}

.bottom-0 {
	bottom: 0;
}

.flex-shrink-0 {
	flex-shrink: 0;
}
</style>